<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData">
      <router-link
        :to="item.path"
        class="tab-bar-item"
        :class="{ active: currentIndex === index }"
        @click="itemClick(index)"
      >
        <img
          v-if="currentIndex !== index"
          :src="getAssetURL(item.image)"
          alt=""
        />
        <img v-else :src="getAssetURL(item.imageActive)" alt="" />
        <span class="text"> {{ item.text }}</span>
      </router-link>
    </template>
  </div>
</template>

<script setup>
import tabbarData from "@/assets/data/tabbar.js";
import { getAssetURL } from "@/utils/load_assets.js";
import { ref } from "vue";

const currentIndex = ref(0);
const itemClick = (index) => {
  currentIndex.value = index;
};
</script>

<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &.active {
    color: var(--primary-color);
  }

  .text {
    font-size: 12px;
  }

  img {
    width: 33px;
  }
}
</style>
